<template>
<div>
        <!-- 导航 -->
          <div class="navi flex">
             <button v-for="item in NaviData" :key="item.id" 
                @click="NaviState = item.id"
                :class="NaviState == item.id? 'active' : '' ">
                {{item.label}}
             </button>
         </div>
        <!-- 内容 -->
        <div v-if="FriendRecord && getFriendRecordData.length>0" class="content overflow-auto">
            <div v-for="item in getFriendRecordData" :key="item.id" class="FROne flex">
            <img :src="item.headphoto" class="headphoto">
            <div class="detail flex">
                <div id="name" class="overflow">{{item.username}}</div>
                <div id="content" class="overflow">{{item.content}} {{item.updateTime | time}}</div>
            </div>
            <div class="fun" v-if="NaviState==1 "> 
                    <button class="danger" @click="ResolveFriendApply_(item,3)">拒绝</button>
                    <button class="success"  @click="ResolveFriendApply_(item,2)">同意</button>
            </div>
            <div class="fun" v-else>
                <div v-if="item.type == 1">待验证</div>
                <div v-else-if="item.type == 2">已同意</div>
                <div v-else>已拒绝</div>
                </div>
            </div>
        </div>

        <el-empty v-else>

        </el-empty>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
  export default 
  {
     name :'',
     data() {
        return {
            NaviState:1,
            NaviData:[
                {id:1,label:'待处理',name:'pending'},
                {id:2,label:'已处理',name:'processed'},
                {id:3,label:'已申请',name:'apply'}
            ]
        }
     }, 
     computed:{
        ...mapState('Inform',['FriendRecord']),
        getFriendRecordData(){
            let obj = this.NaviData.find(item => item.id == this.NaviState)
            if(obj != null) return this.FriendRecord[obj.name]
            return []
        }
     },
     methods:{
        ...mapActions('Chat',['ResolveFriendApply']),
        async ResolveFriendApply_(record,type_){
            let content = Object.assign({},record)
            content.type = type_
            let res = await this.ResolveFriendApply(content)
            if(res.code == 200) this.$message.success('处理成功')
            else this.$message.error(res.message)
        }
     }
  }
</script>
<style scoped lang='less'>

//导航
.navi{
    width: 100%;
    justify-content:center;
    margin: 20px 0;
    button{
        background: rgba(0, 0, 0, 0.5);
        padding: 5px 10px;
        border-radius: 20px;
        color: white;
        margin-right: 20px;
        font-size: 18px;
    }
    .active{
         background: var(--GeneralBackColor);
    }
}
//内容
.content{
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    height: 80%;
    overflow: auto;
}
//申请记录
.FROne{
     width: 100%;
     justify-content:flex-start;
     flex-wrap: nowrap;
     background: var(--GeneralBackColor-half);
     padding: 5px;
     border-radius: 5px;
     box-sizing: border-box;
     position: relative;
     margin-bottom: 5px;

    .detail{
        margin-left: 5px;
        max-width: 80%;

        #name{
            font-size: 25px;
            font-weight: 600;
            width: 100%;
        }
        #content{
            font-size: 14px;
            width: 100%;
            letter-spacing: 0;
        }
    }
    .fun{
        position: absolute;
        right: 10px;
        button{
           border-radius: 5px;
            padding: 7px;
            margin-left: 5px;
            color: white;
            font-size: 15px;
            font-weight: 600;
        }
        .success{
            background: #409EFF;       
        }
        .danger{
            background: red;
        }
    }
}
</style>